---
import { SITE, LOCALE } from '@config'

import "@styles/base.min.css"

import Header from '@components/Header.astro'
import Footer from '@components/Footer.astro'

export interface Props {
	title?: string
	author?: string
	description?: string
	ogImage?: string
	canonicalURL?: string
	pubDatetime?: Date
	modDatetime?: Date | null
	scrollSmooth?: boolean
}

const { 
	title,
	description,
	author = SITE.author,
	ogImage = SITE.ogImage,
	canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
} = Astro.props
---

<!-- 基础外层 HTML 结构 -->
<!doctype html>
<html lang=`${ LOCALE.lang ?? "en" }`>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no"> 
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="description" content={ description ? description : SITE.desc } />
		<meta name="generator" content={ Astro.generator } />
		<meta name="robots" content="all">
		
		<meta name="title" content={ title + SITE.title } />
		<meta name="author" content={ author } />
		<meta name="Copyright" content={ author }/>
		<link rel="sitemap" href="/sitemap-index.xml" />
		
		<meta property="og:title" content={ title + SITE.title}>
		<meta property="og:description" content={ description ? description : SITE.desc }>
		<meta property="og:image" content={ ogImage }>
		<meta property="image" content={ ogImage }>

		<meta property="twitter:card" content="summary_large_image" />
		<meta property="twitter:url" content={ canonicalURL } />
		<meta property="twitter:title" content={ title + SITE.title } />
		<meta property="twitter:description" content={ description ? description : SITE.desc } />
		<meta property="twitter:image" content={ ogImage } />
		
		<meta name="Description" content={ description ? description : SITE.desc }/>
		<meta name="Keywords" content="咖啡blog, 技术博客, 编程开发, 电脑技巧, 琐碎生活, 动漫, 游戏, Java, JavaScript, React, Go, cafe blog"/>
		
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

		<meta name="theme-color" content="" />
		
		<title>{ title + SITE.title }</title>

		<link 
			rel="shortcut icon" 
			href="https://testingcf.jsdelivr.net/gh/cafekiller/cafe.cdn/images/favicon.ico" 
			type="image/x-icon" 
			as="image">
		
		<link rel="stylesheet" href="/assets/css/message.min.css" as="style"/>

		<script src="/assets/js/toggleTheme.min.js" is:inline></script>
	</head>

	<body style="zoom: var(--zoom)">
		<div class="wrapper">
			<Header></Header>
			<slot />
		</div>
		<Footer></Footer>
	</body>

</html>

<style lang="scss" scoped>
	body {
		padding-top: 60px;
		min-width: 360px;
    	background-color: var(--pageBGC);
	}

	.wrapper {
		padding: 40px;
		margin: 0 auto 0;
		position: relative;
		max-width: 786px;
		min-width: 360px;
		min-height: calc(100vh - 120px);
		font-family: var(--baseFont);
		border-radius: 3px;
		background-color: var(--bodyBGC);
		box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
		transition: all .3s ease;
	}

	@media screen and (max-width: 786px) {
		body { padding-top: 0 }
		.wrapper { padding: 24px }
	}
</style>